<template>
	<a-modal :title="!addOrEdit ? '新增' : '编辑'" :width="1400" :maskClosable="false" destoryOnClose :visible="visible"
		:confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-row>
					<a-col :span="12">
						<a-form-item label="型号名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input placeholder="请输入 型号名称"
								v-decorator="['name', { rules: [{ required: true, message: '请输入型号名称！' }] }]" />
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input placeholder="请输入 排序"
								v-decorator="['sort', { rules: [{ required: true, message: '请输入排序！' }] }]" />
						</a-form-item>
					</a-col>

					<a-col :span="12" class="form-item-placeholder">
						<a-form-item label="物料明细" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-button type="primary" @click="$refs.addForm.init(addOrEdit, loadData)">
								添加物料
							</a-button>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>

			<a-table ref="table" :scroll="{ x: 1400, y: 500 }" size="default" :columns="columns" :data-source="loadData"
				:alert="true" :rowKey="(record) => record.materialId" v-if="!addOrEdit">
				<!-- <span slot="image" slot-scope="text, record">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
				<span slot="sort" slot-scope="text, record">
					<template>
						<a-input placeholder="排序" v-model="record.sort" />
					</template>
				</span>
				<span slot="anotherName" slot-scope="text, record">
					<template>
						<a-input placeholder="别名" v-model="record.anotherName" />
					</template>
				</span>
				<span slot="actionMaterial" slot-scope="text, record,index">
					<template>
						<a-popconfirm placement="topRight" title="确认删除？" @confirm="delRow(record, index)">
							<a>移除</a>
						</a-popconfirm>
					</template>
					<template>
					</template>
				</span>
			</a-table>

			<a-table ref="table" :scroll="{ x: 1400, y: 500 }" size="default" :columns="columns" :data-source="loadData"
				:alert="true" :rowKey="(record) => record.materialId" v-if="addOrEdit">
				<!-- <span slot="image" slot-scope="text, record">
					<image-preview :images="text" />
				</span> -->
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
				<span slot="sort" slot-scope="text, record">
					<template>
						<a-input placeholder="排序" v-model="record.sort" />
					</template>
				</span>
				<span slot="anotherName" slot-scope="text, record">
					<template>
						<a-input placeholder="别名" v-model="record.anotherName" />
					</template>
				</span>
				<span slot="actionMaterial" slot-scope="text, record,index">
					<template>
						<a-popconfirm placement="topRight" title="确认删除？" @confirm="delRow(record, index)">
							<a>移除</a>
						</a-popconfirm>
					</template>
					<template>
					</template>
				</span>
			</a-table>
		</a-spin>
		<add-form ref="addForm" @ok="handleAddFormOk"></add-form>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import addForm from './addForm.vue';

import { add, del, page, edit } from '@/api/modular/main/emsModel/emsModel'

export default {
	components: {
		STable,
		addForm
	},
	data() {
		return {
			labelCol: {
				xs: { span: 4 },
				sm: { span: 4 }
			},
			wrapperCol: {
				xs: { span: 10 },
				sm: { span: 10 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 4 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 18 }
			},
			loadData: [],
			disabled: false,
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			loading: false,
			isPackaging: false,
			needDeleteFileUid: null,
			previewVisible: false,
			previewImage: '',
			fileList: [],
			orgIdStorehouse: null,
			sysOrgs: [],
			materialType: '',
			orgTree: [],
			// suppliers: [],
			danweiList: [],
			purchasePrice: undefined, //采购价
			addOrEdit: false,
			columns: [],
			editModelId: null,
			currentType: 1,
		}
	},
	computed: {
	},
	methods: {
		add(record) {
			this.visible = true;
			this.addOrEdit = false;
			this.currentType = record;
			console.log("this.currentType", this.currentType);

			this.columns = [
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存',
					dataIndex: 'inventoryNumber'
				},
				{
					title: '供应商',
					dataIndex: 'orgIdSupplierName'
				},
				{
					title: '排序',
					dataIndex: 'sort',
					align: 'center',
					scopedSlots: { customRender: 'sort' },
				},
				{
					title: '别名',
					dataIndex: 'anotherName',
					scopedSlots: { customRender: 'anotherName' }
				},
				{
					title: '操作',
					dataIndex: 'actionMaterial',
					fixed: 'right',
					scopedSlots: { customRender: 'actionMaterial' }
				}
			];
		},
		edit(record, kanbanType) {
			console.log("record: ", record);
			this.visible = true;
			this.addOrEdit = true;
			setTimeout(() => {
				this.form.setFieldsValue({
					name: record.name,
					sort: record.sort,
				})
			}, 200);
			this.currentType = kanbanType
			this.editModelId = record.modelId;
			this.columns = [
				{
					title: '料号1',
					dataIndex: 'emsMaterialResult.materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'emsMaterialResult.materialName'
				},
				{
					title: '规格',
					dataIndex: 'emsMaterialResult.materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'emsMaterialResult.image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存',
					dataIndex: 'emsMaterialResult.inventoryNumber'
				},
				{
					title: '供应商',
					dataIndex: 'emsMaterialResult.orgIdSupplierName'
				},
				{
					title: '排序',
					dataIndex: 'sort',
					align: 'center',
					scopedSlots: { customRender: 'sort' },
				},
				{
					title: '别名',
					dataIndex: 'anotherName',
					scopedSlots: { customRender: 'anotherName' }
				},
				{
					title: '操作',
					dataIndex: 'actionMaterial',
					fixed: 'right',
					scopedSlots: { customRender: 'actionMaterial' }
				}
			];
			this.getDetails(record)
		},
		/**
		 * 删除行
		 * @param record 
		 * @param index 
		 */
		delRow(record, index) {
			console.log(record, index);
			if (this.addOrEdit) {//编辑
				del({
					modelMaterialId: record.modelMaterialId
				}).then(res => {
					if (res.code == 200) {
						this.loadData.splice(index, 1);
					}
				})
			} else {
				this.loadData.splice(index, 1);
			}
		},
		/**
		 * 编辑 查询详情
		 * @param record 
		 */
		getDetails(record) {
			page({
				modelId: record.modelId
			}).then(res => {
				this.loadData = res.data.rows;
			})
		},
		/**
		 * 添加物料弹框传值
		 * @param data 
		 */
		handleAddFormOk(data) {
			console.log("######data", data);
			if (!this.addOrEdit) {//新增
				console.log("this.loadData", this.loadData);
				this.loadData = data.selectedRows.map((val, index) => {
					return {
						...val,
						sort: index + 1,
					}
				})
			} else {//编辑
				this.loadData = data.selectedRows.map((val, index) => {
					return {
						...val,
						emsMaterialResult: {
							...val
						},
						sort: index + 1,
					}
				})
			}
		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true;
			validateFields((errors, values) => {
				if (!errors) {
					console.log(values);
					let emsModelMaterialList = this.loadData.map(item => {
						return {
							materialId: item.materialId,
							anotherName: item.anotherName,
							sort: item.sort,
						}
					})
					let param = {
						...values,
						type: this.currentType,
						status: 0,
						emsModelMaterialList: emsModelMaterialList
					}
					console.log(param);
					if (this.addOrEdit) {
						param.modelId = this.editModelId;
						edit(param).then(res => {
							this.confirmLoading = false;
							this.$emit('edit');
							this.visible = false;
							this.loadData = [];
						})
					} else {
						add(param).then(res => {
							this.confirmLoading = false;
							this.$emit('add', res.data);
							this.visible = false;
							this.loadData = [];
						})
					}
					this.form.resetFields()
					console.log(this.loadData);
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.loadData = []
			this.visible = false
		},
	}
}
</script>

<!--<style scoped>-->
<!--.form-item-placeholder {-->
<!--  min-height: 64px;-->
<!--}-->
<!--</style>-->